<script setup>
import { ref, onMounted } from 'vue'
import { subjectAPI } from '@/api/subject/index'

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  placeholder: {
    type: String,
    default: '请选择考试科目'
  },
  allowClear: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['update:modelValue'])
const subjectList = ref([])
const loading = ref(false)

onMounted(async () => {
  try {
    loading.value = true
    const res = await subjectAPI.getList()
    subjectList.value = res || []
  } catch (error) {
    console.error('获取科目列表失败:', error)
  } finally {
    loading.value = false
  }
})

const handleChange = (value) => {
  emit('update:modelValue', value)
}
</script>

<template>
  <a-select
      :model-value="modelValue"
      :loading="loading"
      :placeholder="placeholder"
      :allow-clear="allowClear"
      @change="handleChange"
      allow-clear
  >
    <a-option
        v-for="item in subjectList"
        :key="item.id"
        :value="item.id"
        :label="item.subjectName"
    />
  </a-select>
</template>

<style scoped>
/* 可根据需要添加样式 */
</style>